<template>
  <el-dialog
    v-model="addDialog"
    :close-on-click-modal="false"
    title="执行日志"
    width="90%"
  >
    <div>
      <el-form :inline="true" :model="queryForm.data" label-width="0px">
        <el-form-item>
          <el-input
            v-model="queryForm.data.jobName"
            clearable
            placeholder="输入任务名称搜索"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryForm.data.createTime"
            type="datetimerange"
            range-separator=":"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryForm.data.isSuccess"
            placeholder="状态"
            clearable
            style="width: 120px"
          >
            <el-option
              v-for="item in statusDict.data"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="ml-[10px]">
          <el-button type="primary" :icon="Search" @click="search"
            >搜索</el-button
          >
          <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>
          <el-button type="warning" :icon="Download" @click="exportData"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <div class="w-full">
        <el-table v-loading="loading" :data="tableData.data">
          <el-table-column
            :show-overflow-tooltip="true"
            prop="jobName"
            label="任务名称"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="beanName"
            label="Bean名称"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="methodName"
            label="执行方法"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="params"
            width="120px"
            label="参数"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="cronExpression"
            label="cron表达式"
          />
          <el-table-column prop="createTime" label="异常详情" width="110px">
            <template #default="scope">
              <el-button
                v-show="scope.row.exceptionDetail"
                size="mini"
                type="text"
                @click="info(scope.row.exceptionDetail)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="time"
            width="100px"
            label="耗时(毫秒)"
          />
          <el-table-column
            align="center"
            prop="isSuccess"
            width="80px"
            label="状态"
          >
            <template #default="scope">
              <el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{
                scope.row.isSuccess ? "成功" : "失败"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="createTime"
            label="创建日期"
          />
        </el-table>
      </div>
      <div class="page w-full mt-[10px]">
        <el-pagination
          v-model:current-page="pageObj.data.currentPage"
          v-model:page-size="pageObj.data.pageSize"
          layout="total, prev, pager, next"
          :total="pageObj.data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="errorShow"
    title="异常详情"
    :close-on-click-modal="false"
    width="90%"
  >
    <div>
      <pre>{{ errorInfo }}</pre>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { RefreshLeft, Search, Download } from "@element-plus/icons-vue";
import { ElForm } from "element-plus";
import {
  exportJobsLogList,
  exportUserList,
  getJobsList,
  getJobsLogList,
  ResultJobs,
  ResultJobSLog
} from "@/api/system";
import { downloadFile } from "@/utils";

const addDialog = ref(false);
const statusDict = reactive({
  data: [
    {
      value: true,
      label: "成功"
    },
    {
      value: false,
      label: "失败"
    }
  ]
});

const queryForm = reactive({
  data: {
    jobName: undefined,
    isSuccess: undefined,
    createTime: []
  }
});
const resetQuery = () => {
  queryForm.data = {
    jobName: undefined,
    isSuccess: undefined,
    createTime: []
  };
};
const pageObj = reactive({
  data: {
    currentPage: 1,
    pageSize: 6,
    total: 0
  }
});
const search = async () => {
  pageObj.data.currentPage = 1;
  let { content, totalElements } = await getData();
  pageObj.data.total = totalElements;
  tableData.data = content;
};
const tableData = reactive({
  data: []
});
const getList = async () => {
  let { content, totalElements } = await getData();
  pageObj.data.total = totalElements;
  tableData.data = content;
};
const loading = ref(false);
const getData = () => {
  loading.value = true;
  return new Promise<ResultJobSLog>(async (resolve, reject) => {
    let data = await getJobsLogList({
      page: pageObj.data.currentPage - 1,
      size: pageObj.data.pageSize,
      sort: "id,desc",
      jobName: queryForm.data.jobName ? queryForm.data.jobName : undefined,
      isSuccess:
        queryForm.data.isSuccess === undefined
          ? undefined
          : queryForm.data.isSuccess,
      createTime: queryForm.data.createTime.length
        ? queryForm.data.createTime
        : undefined
    });
    loading.value = false;
    resolve(data);
  });
};
const handleSizeChange = () => {
  search();
};
const handleCurrentChange = async () => {
  getList();
};
onMounted(() => {
  search();
});
const errorInfo = ref("");
const errorShow = ref(false);
const info = data => {
  errorShow.value = true;
  errorInfo.value = data;
};
const exportData = async () => {
  let res = await exportJobsLogList({
    page: pageObj.data.currentPage - 1,
    size: pageObj.data.pageSize,
    sort: "id,desc",
    jobName: queryForm.data.jobName ? queryForm.data.jobName : undefined,
    isSuccess:
      queryForm.data.isSuccess === undefined
        ? undefined
        : queryForm.data.isSuccess,
    createTime: queryForm.data.createTime.length
      ? queryForm.data.createTime
      : undefined
  });
  downloadFile(res, "任务日志数据", "xlsx");
};
defineExpose({
  addDialog
});
</script>
